<template>
 <div class="service-content">
    <van-nav-bar
      class="page-nav-bar"
      title="售后服务"
      left-arrow
      @click-left="$router.back()"
    />
    <van-cell title="申请类型" is-link :value="this.formData.reason || '点击选择'" @click="show=true"></van-cell>
    <van-cell title="申请金额" :value="payAmount+'元'"></van-cell>
    <van-field
        slot="label"
          v-model="formData.description"
          rows="2"
          autosize
          label="申请说明"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
    <van-cell title="上传图片">
      <div slot="label">
        <van-uploader v-model="fileList" multiple />
      </div>
    </van-cell>
    <van-field
        slot="label"
          v-model="receiverPhone"
          rows="2"
          autosize
          label="联系电话"
          readonly
          type="number"
          maxlength="11"
          placeholder="请输入手机号"
        />
    <br>
    <van-button style="width:80%;margin:0 auto;" block round type="primary">确认提交</van-button>
    <van-popup v-model="show" position="bottom">
      <van-picker
        title="选择类型"
        show-toolbar
        :columns="reason"
        @cancel="show=false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { getServiceReason } from '@/api/order'
import { mapGetters, mapState } from 'vuex'
export default {
  name:'Service',
  data() {
    return {
      reason:[],
      fileList:[],
      show:false,
      formData:{
        "description": "",  // 描述
        "memberUsername": "",  // 会员用户名
        "orderId": 0, // 订单id
        "orderSn": "", // 订单编号
        "productAttr": "",  // 商品销售属性
        "productBrand": "", // 商品品牌
        "productCount": 0, // 退货数量
        "productId": 0, // 退货商品id
        "productName": "", // 商品名称
        "productPic": "", // 商品图片
        "productPrice": 0,  // 商品单价
        "productRealPrice": 0, // 商品实际支付单价
        "proofPics": "", // 凭证图片，以逗号隔开
        "reason": "",  // 原因
        "returnName": "",  // 退货人姓名
        "returnPhone": ""  // 退货人电话
      }
    }
  },
  created () {
    this.initData()
  },
  computed: {
    ...mapGetters('order',['payAmount','receiverPhone','memberUsername'])
  },
  methods: {
    async initData() {
      let { list } = await getServiceReason()
      this.reason = list.filter(item=>item.status === 1).map(item=>item.name)
    },
    onConfirm(value, index) {
      this.formData.reason = value
      this.show = false
    },
  },
  beforeDestroy () {
    // 清除vuex中内容
    this.$store.commit('order/setOrderInfo',{})
  },
}
</script>
<style lang="less" scoped>
/deep/ .van-field__label{
  color: #333;
}
</style>